var GRAPH;
var Graph = /** @class */ (function () {
    function Graph(lay) {
        this.lay = lay;
        this.number = 0;
        this.layout = lay;
        this.items = [];
        this.fixedPosition = [];
    }
    Graph.prototype.isItemInGraph = function (name) {
        return this.items.some(function (item) { return item.name === name; });
    };
    Graph.prototype.createEmptyGraph = function () {
        this.cyElement = cytoscape({
            container: document.getElementById('graph'),
            style: getStyle(),
            layout: { name: this.layout }
        });
    };
    Graph.prototype.addElement = function (str, editable) {
        if (editable === void 0) { editable = false; }
        if (!this.isItemInGraph(str)) {
            var i = new Item('n' + this.number++, str, editable);
            this.items.push(i);
            this.cyElement.add({
                group: 'nodes',
                data: {
                    id: i.id,
                    name: i.name
                }
            });
            this.rerun();
        }
        else {
            alert("Graf obsahuje vrchol s rovnakým menom - zmeň názov alebo pridaj názov prázdnemu vrcholu");
        }
    };
    Graph.prototype.addElements = function (strings, editable) {
        if (editable === void 0) { editable = false; }
        var nodes = [];
        for (var _i = 0, strings_1 = strings; _i < strings_1.length; _i++) {
            var str = strings_1[_i];
            if (!this.isItemInGraph(str)) {
                var i = new Item('n' + this.number++, str, editable);
                this.items.push(i);
                nodes.push({
                    group: 'nodes',
                    data: {
                        id: i.id,
                        name: i.name
                    }
                });
            }
        }
        this.cyElement.add(nodes);
        this.rerun();
    };
    Graph.prototype.removeElement = function (str) {
        var element = this.cyElement.$('#' + str);
        this.cyElement.remove(element);
        this.items = this.items.filter(function (item) { return item.id != str; });
        this.rerun();
    };
    Graph.prototype.removeElements = function (strings) {
        for (var _i = 0, strings_2 = strings; _i < strings_2.length; _i++) {
            var str = strings_2[_i];
            var element = this.cyElement.$('#' + str);
            this.cyElement.remove(element);
        }
        this.rerun();
    };
    Graph.prototype.removeEdgeById = function (id) {
        this.cyElement.remove('edge[target=\'' + id + '\']');
        this.rerun();
    };
    Graph.prototype.rerun = function () {
        this.cyElement.layout({ name: this.layout }).run();
        for (var _i = 0, _a = this.fixedPosition; _i < _a.length; _i++) {
            var item = _a[_i];
            this.cyElement.$('#' + item.id).position({
                x: item.x,
                y: item.y
            });
        }
    };
    Graph.prototype.lockElement = function (str) {
        var n = this.getItemByName(str);
        this.cyElement.$('#' + n.id).ungrabify();
        n.editable = false;
    };
    Graph.prototype.lockElementMove = function (str) {
        var n = this.getItemByName(str);
        n.locked = true;
        n.editable = false;
    };
    Graph.prototype.getElement = function (str) {
        return this.cyElement.$('#' + str);
    };
    Graph.prototype.getItemByName = function (str) {
        var ar = this.items.filter(function (i) { return i.name === str; });
        return ar[0];
    };
    Graph.prototype.connect = function (str1, str2) {
        var id1 = this.getIdFromName(str1);
        var id2 = this.getIdFromName(str2);
        if (id1 != null && id2 != null) {
            var edges = [];
            edges.push({
                group: 'edges',
                data: {
                    source: id1,
                    target: id2
                }
            });
            this.cyElement.add(edges);
            this.rerun();
        }
    };
    Graph.prototype.getIdFromName = function (str) {
        var ar = this.items.filter(function (i) { return i.name === str; });
        return ar.length > 0 ? ar[0].id : null;
    };
    Graph.prototype.addOnNodeDiv = function (node) {
        var n = GRAPH.getItemById(node.id());
        if (n.editable) {
            var div = document.getElementById('nodeDiv');
            if (div != null) {
                document.body.removeChild(div);
            }
            var makeDiv = function (text) {
                var div = document.createElement('div');
                var textarea = document.createElement('textarea');
                var btnOK = document.createElement('BUTTON');
                div.id = 'nodeDiv';
                btnOK.id = 'OK';
                textarea.id = 'text';
                div.classList.add('popper-div');
                textarea.innerHTML = text;
                div.appendChild(textarea);
                div.appendChild(btnOK);
                document.body.appendChild(div);
                return div;
            };
            var popperNode = node.popper({
                content: function () { return makeDiv(node.data('name')); }
            });
            var updateNode = function () {
                popperNode.scheduleUpdate();
            };
            node.on('position', updateNode);
            $("#OK").click(function () {
                var text = $('textarea#text').val();
                if (!GRAPH.isItemInGraph(text)) {
                    var n = GRAPH.cyElement.$id(node.id());
                    var nodeInGraph = GRAPH.getItemById(node.id());
                    nodeInGraph.name = text;
                    n.data('name', text);
                }
                else {
                    alert("Graf obsahuje vrchol s rovnakým menom - zmeň názov alebo pridaj názov prázdnemu vrcholu");
                }
                var div = document.getElementById('nodeDiv');
                document.body.removeChild(div);
            });
            //this.cyElement.on('pan zoom resize', updateNode);
        }
    };
    Graph.prototype.getItemById = function (str) {
        var ar = this.items.filter(function (i) { return i.id === str; });
        return ar.length > 0 ? ar[0] : null;
    };
    Graph.prototype.createMenu = function () {
        this.cyElement.cxtmenu({
            selector: 'node',
            commands: [
                {
                    content: '<span class="fas fa-pencil-alt"></span>',
                    select: function (ele) {
                        if (!GRAPH.getItemById(ele.id()).locked) {
                            GRAPH.addOnNodeDiv(ele);
                        }
                        else {
                            alert("Nie je možné upravovať zamknutý vrchol");
                        }
                    }
                },
                {
                    content: '<span class="fas fa-trash-alt"></span>',
                    select: function (ele) {
                        if (!GRAPH.getItemById(ele.id()).locked) {
                            GRAPH.removeElement(ele.id());
                        }
                        else {
                            alert("Nie je možné vymazať zamknutý vrchol");
                        }
                    }
                }
            ]
        });
    };
    return Graph;
}());
var Item = /** @class */ (function () {
    function Item(ID, NAME, edit) {
        if (edit === void 0) { edit = false; }
        this.ID = ID;
        this.NAME = NAME;
        this.edit = edit;
        this.locked = false;
        this.id = ID;
        this.name = NAME;
        this.editable = edit;
    }
    Item.prototype.isEditable = function () {
        return this.editable;
    };
    Item.prototype.setPosition = function (X, Y) {
        this.x = X;
        this.y = Y;
    };
    return Item;
}());
var Edge = /** @class */ (function () {
    function Edge(ITEMS) {
        this.ITEMS = ITEMS;
        this.items = ITEMS;
    }
    return Edge;
}());
function getStringsFromFile(name) {
}
function getStyle() {
    return cytoscape.stylesheet()
        .selector('node')
        .css({
        'shape': 'rectangle',
        'width': '70px',
        'height': '50px',
        'background-color': '#38b47b',
        'text-wrap': 'wrap',
        'text-halign': 'center',
        'text-valign': 'center',
        'label': 'data(name)'
    })
        .selector('edge')
        .css({
        'width': 4,
        'line-color': '#ffaaaa'
    });
}
function createGraph(strings, editable, layout) {
    if (editable === void 0) { editable = false; }
    if (layout === void 0) { layout = "circle"; }
    GRAPH = new Graph(layout);
    var newNodes = [];
    for (var _i = 0, strings_3 = strings; _i < strings_3.length; _i++) {
        var s = strings_3[_i];
        var item = new Item('n' + GRAPH.number++, s, editable);
        GRAPH.items.push(item);
        newNodes.push({
            data: {
                id: item.id,
                name: item.name
            }
        });
    }
    GRAPH.cyElement = cytoscape({
        container: document.getElementById('graph'),
        elements: { nodes: newNodes },
        style: getStyle(),
        layout: { name: GRAPH.layout }
    });
    if (editable) {
        GRAPH.createMenu();
    }
    return GRAPH;
}
function createEmptyGraph() {
    GRAPH.cyElement = cytoscape({
        container: document.getElementById('graph'),
        style: getStyle(),
        layout: { name: this.layout }
    });
    return GRAPH;
}
function onButtonClick(div, args) {
}
